<template>
  <div id="text_property" style="display:flex;">
    <p :style="{ color: fontColor }">字体颜色</p>
    <colorPick :HEX="HEX1" @getColor="getColor"></colorPick>
    <el-tabs
      v-model="editableTabsValue"
      type="border-card"
      style="width: 300px; height: 300px"
      @edit="handleTabsEdit"
    >
      <el-tab-pane
        :key="tabItem.name"
        v-for="(tabItem, idx) in editableTabs"
        :name="tabItem.name"
      >
        <span slot="label">
          <span
            class="iconfont"
            style="height: 100px; margin-right: 0px; display1: inline-block"
            :class="tabItem.icon"
          />{{ tabItem.title }}
        </span>
        <div style="height: 200px; width: 100%; border: 1px solid red">
          <div
            draggable="true"
            @dragstart="dragstart($event, '哈哈哈哈')"
            @dragend="dragend"
          >
            <!-- <el-button type="success" round></el-button> -->
            {{ tabItem.title }}
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>

    <div @drop="drop" @dragover.prevent style="height:300px;width:300px;border:1px solid blue;">
      {{dropData}}
    </div>
    <div>
      <img
          id="img"
          src="https://img0.baidu.com/it/u=2491411887,439076204&fm=26&fmt=auto"
          alt="image"
          draggable="true"
          @dragstart="dragstart($event, 'image data', 'image')"
          style="height:70px;width:70px;"
        >
      
    </div>
  </div>
</template>
<script>
import colorPick from "../../component/colorPick.vue";
export default {
  components: {
    colorPick: colorPick,
  },
  data() {
    return {
      listData: ["白天鹅", "图160"],
      editableTabsValue: "2",
      editableTabs: [
        {
          title: "Tab 1",
          name: "1",
          content: "Tab 1 content",
        },
        {
          title: "Tab 2",
          name: "2",
          content: "Tab 2 content",
        },
      ],
      tabIndex: 2,
      fontColor: "",
      HEX1: "red",
      dropData:''
    };
  },
  methods: {
    getColor(e) {
      this.fontColor = e;
    },
    colorChange(e) {
      console.log(e.target.value);
    },
    handleTabsEdit(targetName, action) {
      if (action === "add") {
        let newTabName = ++this.tabIndex + "";
        this.editableTabs.push({
          title: "New Tab",
          name: newTabName,
          content: "New Tab content",
        });
        this.editableTabsValue = newTabName;
      }
      if (action === "remove") {
        let tabs = this.editableTabs;
        let activeName = this.editableTabsValue;
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
              let nextTab = tabs[index + 1] || tabs[index - 1];
              if (nextTab) {
                activeName = nextTab.name;
              }
            }
          });
        }

        this.editableTabsValue = activeName;
        this.editableTabs = tabs.filter((tab) => tab.name !== targetName);
      }
    },
    dragstart(event, data, type) {
      console.log(event)
      event.dataTransfer.setData("item1", data);
      // this.type = type
      // this.base64 = null
      // if (type === 'image') {
      // } else if (type === 'canvas') {
      //   let canvas = document.getElementById(data).getElementsByTagName('canvas')[0]
      //   let base64 = canvas.toDataURL()
      //   this.base64 = base64
      // } else {
      //   event.dataTransfer.setData('item', data)
      // }
    },
    dragend(event) {
      event.dataTransfer.clearData();
    },
    drop(e){
      // console.log(e)
      let data = e.dataTransfer.getData('item1')
      this.dropData = data
    }
  },
};
</script>
<style scoped>
/* .text_property{
    ::v-deep .el-tabs__item .is-top{
        padding: 0px;
    }
} */
::v-deep .el-tabs__item.is-top {
  padding: 0px;
}
/* ::v-deep .el-tabs__item.is-top.is-active{
    padding: 0px;
} */
</style>
